<template>
	<div>
		<div class="user">
			<img :src="avator" alt="">
			<h2>{{ nickname }}</h2>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { computed } from '@vue/reactivity';
import { useStore } from 'vuex'
const store = useStore();

const avator = computed(() => store.state.user.avator)
const nickname = computed(() => store.state.user.nickname)
</script>


<style scoped lang="scss">
.user {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	img {
		height: 60%;
		border-radius: 50%;
	}
}
</style>